<template>
<div class="deviceMonitor">
  <el-row :gutter="20">
    <el-col :span="3">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-return-and-borrow"></i>
        <span>读者证阅读器</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-plc"></i>
        <span>PLC</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-money"></i>
        <span>收银</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-reader-manage"></i>
        <span>读者管理</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-add-book"></i>
        <span>补书</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-printer"></i>
        <span>打印机</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-send-card"></i>
        <span>发卡</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-backstage"></i>
        <span>后台</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-IDcard"></i>
        <span>身份证</span>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <i class="icon iconfont icon-read"></i>
        <span>阅读</span>
      </div>
    </el-col>
    
    <el-col :span="3" class="statusClassify">
      <div><span class="status normal"></span>正常</div>
      <div><span class="status destroy"></span>损坏</div>
      <div><span class="status shortPaper"></span>缺纸</div>
      <div><span class="status nothing"></span>无部件</div>
    </el-col>
  
  </el-row>
  
  <el-row :gutter="20">
    <div>
      <ul class="ul">
        <li v-for="(item,index) in list" :class="{'offLineBg':item.result.state==='3'}">
          <div class="line1 iconCont">
            <i class="icon iconfont icon-reader-manage " :class="item.result['1']==='2'?'success':'danger'"></i>
            <i class="icon iconfont icon-plc" :class="item.result['2']==='2'?'success':'danger'"></i>
            <i class="icon iconfont icon-add-book" :class="item.result['3']==='2'?'success':'danger'"></i>
            <i class="icon iconfont icon-money" ></i>
            <i class="icon iconfont icon-printer" :class="item.result['9']==='3'?'success':'offLine'"></i>
            <i class="icon iconfont icon-send-card" :class="item.result['6']==='2'?'success':'danger'"></i>
          </div>
          <div class="line2">
            <div>
              <i class="icon iconfont icon-backstage" :class="item.result['1']==='2'?'success':'danger'"></i><br>
              <i class="icon iconfont icon-IDcard" :class="item.result['1']==='2'?'success':'danger'"></i>
            </div>
            <div class="deviceInfo">
              <p>{{ item.id }}:{{ item.result.name }}</p>
              <p>{{ item.result.echotime }}</p>
              <p >
                  <span v-show="item.result.state==='3'">
                    <span class="off">离线</span>
                    <span class="error">报错</span>
                  </span>
                <span v-show="item.result['9']==='3'" class="paper">缺纸</span>
              </p>
            </div>
            <div>
              <i class="icon iconfont icon-read" :class="item.result['1']==='2'?'success':'danger'"></i><br>
              <i class="icon iconfont icon-return-and-borrow" :class="item.result['1']==='2'?'success':'danger'"></i>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </el-row>
</div>
</template>

<script>
  import axios from 'axios'
export default {
   data(){
     return{
       list:{},
     }
   },
   methods:{},
  created() {
    axios.post('http://210.34.36.20:8080/Devices/GetDeviceState4mapnew?callback=1',{emulateJSON: true})  //正常访问 status:200 statusText:"OK"
      .then((res) => {
        this.list = res.data.message
        console.log(res.data)
        console.log(res.data.message)
        console.log(res.message)
        console.log(res.data.message[1].id)
        console.log(res.data.message[1].result.name)
        //alert(res)
        
      })
      .catch((err) => {
        console.log(err)
        alert(err)
      })
  }
  
}
</script>

<style>

</style>
